<template>
  <component
    :is="tag"
    :style="styleProps"
    class="p-text-component"
    :color="color"
    @click="handleClick"
  >
    {{ text }}
  </component>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  transformToComponentProps,
  textDefaultProps,
  textStylePropNames,
} from "./defaultProps";
import useComponentCommon from "@/hooks/useComponentCommon";

const defaultProps = transformToComponentProps(textDefaultProps);
export default defineComponent({
  name: "PText",
  props: {
    tag: {
      type: String,
      default: "div",
    },
    ...defaultProps,
  },
  setup(props) {
    // 通用简化
    const { styleProps, handleClick } = useComponentCommon(
      props,
      textStylePropNames
    );
    return { styleProps, handleClick };
  },
});
</script>
<style lang="less" scoped>
.p-text-component {
  // background-color: red;
}
</style>